<!--
 * @Date: 2024-05-10 15:22:49
 * @LastEditTime: 2024-08-08 14:01:29
 * @Description: 自定义头部
 * @FilePath: \check-app\src\components\u-detail-item\u-detail-item.vue
-->
<template>
  <view class="status-bar"></view>
  <uni-nav-bar
    :fixed="props.fixed"
    :border="false"
    @clickLeft="back"
    @clickRight="clickRight"
    :rightText="props.rightText"
    :title="props.title == 'null' ? '--' : props.title"
    :backgroundColor="backgroundColor"
    :color="color"
  />
</template>
<script setup lang="ts">
import { ref } from "vue";

const props = defineProps({
  fixed: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: "标题",
  },
  rightText: {
    type: String,
    default: "",
  },
  color: {
    type: String,
    default: "#333",
  },
  backgroundColor: {
    type: String,
    default: "#FFFFFF",
  },
  delta: {
    type: Number,
    default: 1,
  },
});
const emit = defineEmits();

const clickRight = () => {
  emit("clickRight");
};
const back = () => {
  uni.navigateBack({
    delta: props.delta,
  });
};
</script>

<style lang="scss" scoped>
.status-bar {
  height: var(--status-bar-height);
  width: 100%;
}
.header-box {
  text-align: center;
  position: relative;
  height: 80rpx;
  line-height: 80rpx;
  font-weight: bold;
  font-size: 16px;
  .back {
    position: absolute;
    left: 20rpx;
  }
}
::v-deep .uni-nav-bar-text {
  font-size: 16px;
}
.uni-navbar {
  width: 100%;
}
</style>
